<template>
	<view class="container"> <!-- 页面-->
		<image class="head_icon" :src="icon" style="width: 100px; height: 100px;" ></image>   <!--头像-->
		<text class="username">{{username}}</text>  <!--用户名-->
		<view style="width: 100%;">  <!--底部容器-->
			<view class="entries"> <!--入口容器-->
				<view class="entry">  <!--入口项-->
					<text class="entry_text">个人信息</text>   <!--入口项文字-->
					<image class="entry_arrow" src="/static/more.png" style="width: 50px; height: 50px;"></image> <!--入口图标-->
				</view>
				<view class="entry"><text class="entry_text">订单列表</text>
					<image class="entry_arrow" src="/static/more.png" style="width: 50px; height: 50px;"></image>
				</view>
				<view class="entry"><text class="entry_text">修改密码</text>
					<image class="entry_arrow" src="/static/more.png" style="width: 50px; height: 50px;"></image>
				</view>
				<view class="entry"><text class="entry_text">意见反馈</text>
					<image class="entry_arrow" src="/static/more.png" style="width: 50px; height: 50px;"></image>
				</view>
			</view>
			<button type="primary" style="margin: 0 20px;" >退出</button>  <!--按钮-->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				icon: '/static/logo.png',
				username: '卢华灯'
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style>
	.container{
		display: flex; /*设置容器为弹性布局容器*/
		flex-direction: column;  /*内部组件主轴从上到下排布*/
		align-items: center; /*内部组件交叉轴水平居中*/
		width: '100%';
		padding-top: 10%;

	}
	.entries{
		width: '90%';
		padding: 20px
		
	}
	.entry{
		width: '90%';
		display: flex;
		flex-direction: row;
		align-items: center;
		height: 50px;
		justify-content: space-between; /*两端对齐*/
		border-top: 1px solid #CCC;
		
	}
	.entry:last-child{ /*为最后一个入口加下边框*/
		border-bottom: 1px solid #CCC;
	}
	.entry text{
		font-size: 20px;
	}
</style>